<template>
  <div class="background">
    <!-- <span class="demonstration">默认</span> -->
    <el-image :src="src"></el-image>
  </div>
  <div class="overall-window">
    <el-container>
      <el-container>
        <!-- <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <template #dropdown>
              <el-dropdown-menu>
                  <el-dropdown-item>查看</el-dropdown-item>
                  <el-dropdown-item>新增</el-dropdown-item>
                  <el-dropdown-item>删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>王小虎</span>
        </el-header> -->
        <div  class="dialogs" style="background-color: #f3f0e7; border-radius:20px 20px 0 0">
          <el-main>
            <el-scrollbar height="250px"> 
              <div class="diaglog-area-right">
                <div class="chatBox chatBox-right chatBox-shadow-right">
                    你好呀，玛卡巴卡🎉？
                </div>
                <el-avatar style="margin: 12px" 
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
              </div>
              <div class="diaglog-area-left">
                <el-avatar style="margin: 12px" 
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                <div class="chatBox chatBox-left chatBox-shadow-left">
                    你好呀，玛卡巴卡🎉？
                </div>
              </div>
              <div class="diaglog-area-right">
                <div class="chatBox chatBox-right chatBox-shadow-right">
                    你好呀，玛卡巴卡🎉？
                </div>
                <el-avatar style="margin: 12px" 
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
              </div>
              <div class="diaglog-area-left">
                <el-avatar style="margin: 12px" 
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                <div class="chatBox chatBox-left chatBox-shadow-left">
                    你好呀，玛卡巴卡🎉？你好呀，玛卡巴卡🎉？你好呀，玛卡巴卡🎉？你好呀，玛卡巴卡🎉？
                </div>
              </div>
              
            </el-scrollbar>
          </el-main>
        </div>
        <el-footer class="edit">
          <el-input
            placeholder="请输入内容"
            v-model="textarea1"
            @input="greet"
            rows="1"
            style="margin: 10px 10px 0 0"
            >
          </el-input>
          <el-button 
            style="margin-top: 10px"
            icon="el-icon-s-promotion"
          round>Send!</el-button>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity';
  export default {
    data() {
      return {
        textarea1: ref(''),
        side: ref('left'),
        src: 'https://user-images.githubusercontent.com/49367723/126169356-bb19d723-02a6-434b-b1c8-dad67bcdcf07.jpeg'
      }
    },
    methods:{
      greet(evt){
        console.log(evt);
      }
    }
  };
</script>

<style>
.el-header {
    /* background-color: #B3C0D1; */
    background-image: -webkit-gradient(linear,right top,left top,from(#cc2b5e),to(#753a88));
    /* color: #333; */
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
  .overall-window {
    padding-left: 330px;
    padding-top: 180px;
    height:200px; 
    width: 600px;
  }
  .dialogs{
    
  }
  .edit {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-around;
    padding: 5px;
    background-color: #EDC99C;
  }
  

  .chatBox{
    position: relative;
    margin:12px;
    padding:5px 8px;
    word-break: break-all;
    /* background: #cc2b5e; */
    /* border: 1px solid #989898; */
    border-radius: 5px;
    max-width:300px;
  }

  .diaglog-area-left{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .chatBox-shadow-left{
    border-radius:  10px 10px 10px 10px;
    background: #F4A93F;
    /* box-shadow: inset 5px -5px 10px #d49337,
                inset -5px 5px 10px #ffbf47; */
  }
  .chatBox-left::before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: -20px;
    top:10px;
    border: 10px solid;
    border-color: transparent #F4A93F transparent transparent ;
  }




  .chatBox-right::before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    right: -20px;
    top:10px;
    border: 10px solid;
    border-color: transparent transparent transparent #ffffff ;
  }
  .chatBox-shadow-right{
    border-radius: 10px 10px 10px 10px;
    background: #ffffff;
    /* box-shadow:  5px -5px 10px #d1d1d1,
                -5px 5px 10px #ffffff; */
  }
  .diaglog-area-right{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }




  .background{
      width:100%;  
      height:100%;  /**宽高100%是为了图片铺满屏幕 */
      z-index:-1;
      position: absolute;
  }
</style>
